﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../static/css/cloud-admin.css" >
	<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="../../static/css/iotxstyle.css" >
</head>
<body>
<!-- PAGE -->
<section>
	<!-- welcome -->
				<div class="col-md-4 col-md-offset-4">
					<div class="welcome-box-plain">
						<div class="guide">
							<div class="step-img">
								<div class="step-first" >
									<img src="../../static/img/step-1.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-2.png">
								</div>
								<div class="step-second" >
									<img src="../../static/img/step-12.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-2.png">
								</div>
								<div class="step-third" >
									<img src="../../static/img/step-13.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-1.png">
								</div>
								<div class="step-forth" >
									<img src="../../static/img/step-24.png">
								</div>
							</div>
							<div class="stepdetail">
								<div class="stepdetail-one">
									Network Connection
								</div>
								<div class="stepdetail-two">
									User Information
								</div>
								<div class="stepdetail-three">
									Server Settings
								</div>
								<div class="stepdetail-four">
									Dusts Settings
								</div>
							</div>
							<div class="step-title">
								<div class="steptitle-one">
									Step 1
								</div>
								<div class="steptitle-two">
									Step 2
								</div>
								<div class="steptitle-three">
									Step 3
								</div>
								<div class="steptitle-four">
									Step 4
								</div>
							</div>
							<div class="step-line">
								<img src="../../static/img/step-line.png" style="width: 97%">
							</div>
						</div>
							<div class="connect">
								<div class="upmethod">
									<div class="radioup">
										<label class="demo--label" style="float: left">
										<input checked="checked" class="demo--radio" id="domainRadio" type="radio" name="demo-radio">
										<span class="demo--radioInput"></span>
										</label>
									</div>
									<div class="upname">
										Server  Name
									</div>
									<div class="upinfo">
									<input class="form-control"  id="domainAddress" style="float: inherit;width: 100%;height: 92%;font-size: 18px"  placeholder="www.example.com" >
									</div>
									<div class="portname">
										Port
									</div>
									<div class="portinfo">
										<input class="form-control"  id="domainPort" maxlength="4" size="4" style="float: inherit;width: 100%;height: 92%;font-size: 18px"  placeholder="8080" >
									</div>
									<div class="portbutton">
										<button class="protconnectbutton">Connect</button>
									</div>
								</div>
								<div class="upmethod">
									<div class="radioup">
										<label class="demo--label" style="float: left">
											<input class="demo--radio" type="radio" id="ipRadio" name="demo-radio">
											<span class="demo--radioInput"></span>
										</label>
									</div>
									<div class="upname">
										Server  IP
									</div>
									<div class="upinfo">
										<input  class="form-control" id="ipAddress0" type="text" maxlength="3" size="3" style="float:none ;width:22%;height:90%;margin-right:0px;display: inline"/>.
										<input  class="form-control" id="ipAddress1" type="text" maxlength="3" size="3"	style="float:none ;width:22%;height:90%;margin-right:0px;display: inline"/>.
										<input  class="form-control" id="ipAddress2" type="text" maxlength="3" size="3"	style="float:none ;width:22%;height:90%;margin-right:0px;display: inline"/>.
										<input  class="form-control" id="ipAddress3" type="text" maxlength="3" size="3"	style="float:none ;width:22%;height:90%;margin-right:0px;display: inline"/>
									</div>
									<div class="portname">
										Port
									</div>
									<div class="portinfo">
										<input class="form-control" maxlength="4" id="ipPort" size="4" style="float: inherit;width: 100%;height: 92%;font-size: 18px"  placeholder="8080" >
									</div>
									<div class="portbutton">
										<button class="protconnectbutton">Connect</button>
									</div>
								</div>
								<div class="upmethod">
									<div class="radioup">
										<label class="demo--label" style="float: left">
											<input class="demo--radio"  id="noneRadio" type="radio" name="demo-radio">
											<span class="demo--radioInput"></span>
										</label>
									</div>
									<div class="upname">
										None
									</div>

								</div>
								<div class="setting-up-picture">
									<div class="setting-up-img1">
										<img src="../../static/img/setting-up-p1.png">
									</div>
									<div class="setting-up-img2">
										<img src="../../static/img/setting-up-line01.png">
									</div>
									<div class="setting-up-center">
										<img src="../../static/img/setting-up-state3.png">
									</div>
									<div class="setting-up-img3">
										<img src="../../static/img/setting-up-line02.png">
									</div>
									<div class="setting-up-img4">
										<img src="../../static/img/setting-up-p2.png">
									</div>
								</div>
								<div class="setting-up-state" id="connect_status">

                                    {% if serverData['connectStatus']==None %}
                                        Connection  Status
                                    {% elif serverData['connectStatus']==True %}
                                        Connection  Success
                                    {% elif serverData['connectStatus']==False %}
                                        Connection  Failed
                                    {% endif %}
								</div>
							</div>
							<div class="next">
								<button id="skipbutton" class="upbutton">SKIP</button>
								<button id="upbutton" class="upbutton">PREVIOUS</button>
								<button id="nextbutton" class="nextbutton">NEXT</button>
							</div>

					</div>
				</div>
	<!--/welcome -->
    <!--hidden area-->
    <input  type="hidden" id="remote_address" value="{{ serverData['server_name'] }}"/>
    <input  type="hidden" id="ip_port" value="{{ serverData['ip_port'] }}" />
<input  type="hidden" id="123" value="{{ serverData['connectStatus'] }}" />
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../static/js/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../static/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../static/bootstrap-dist/js/bootstrap.min.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../static/js/script.js"></script>
<script>
    var serverConnect = function (server,port) {
        var  data = {
                   "server_name":server,
                   "ip_port":port
               };
               $.ajax({
                      type: 'POST',
                      url: '/network/checkInternet',
                      data: JSON.stringify(data),
                      contentType:'application/json',
                      dataType: 'json',
                      success: function(result){
                          if(result.status == 0){
                              $("#connect_status").text("connect Failed");
                          }else{
                              if(result.data){
                                  $("#connect_status").text("connect Success");
                              }else{
                                  $("#connect_status").text("connect Failed");
                              }
                          }
                          }
               });
    }



    jQuery(document).ready(function() {
        var remoteAddress = $("#remote_address").val();
        var ipPort = $("#ip_port").val();
        if(remoteAddress && ipPort){
            var ipArray = remoteAddress.split(".");
            if(ipArray.length>3){
             $("#ipRadio").attr("checked","checked");
              $("#ipAddress0").val(ipArray[0]);
               $("#ipAddress1").val(ipArray[1]);
                $("#ipAddress2").val(ipArray[2]);
                 $("#ipAddress3").val(ipArray[3]);
             $("#ipPort").val(ipPort);
            }else{
             $("#domainRadio").attr("checked","checked");
             $("#domainAddress").val(remoteAddress);
             $("#domainPort").val(ipPort);
            }
        }else{
            $("#noneRadio").attr("checked","checked");
        }
        //connect 按钮
        $(".protconnectbutton").click(function () {
            var radioId = $(this).parent().parent().find("input:eq(0)").attr("id");
            var server = null;
            var ipPort = null;
            if (radioId == "domainRadio"){
                  server = $("#domainAddress").val();
                  ipPort = $("#domainPort").val();
            }else if(radioId == "ipRadio"){
                  server = $("#ipAddress0").val()+"."+$("#ipAddress1").val()+"."+$("#ipAddress2").val()+"."+$("#ipAddress3").val();
                  ipPort = $("#ipPort").val();
            }
            serverConnect(server,ipPort);
        });


		$('#upbutton').click(function(){
			window.location.href='/guide/userInfo';
		});
        $('#nextbutton').click(function(){
            window.location.href='/guide/settingdown';
        });
        $('#skipbutton').click(function(){
            window.location.href='/system/index';
        });

    });
</script>

</body>
</html>